<template>
    <div style="height: 50px;">
        <el-button @click="add()">新增</el-button>
        <el-button @click="upd()">修改</el-button>
        <el-button @click="Export()">导出</el-button>
    </div>


    <!-- 查询条件 -->
    <el-form :model="PurchaseShow" lclass="demo-form-inline" :inline="true">
        <el-form-item label="退货编号">
            <el-input v-model="PurchaseShow.PurchaseReturnsCode" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货主题">
            <el-input v-model="PurchaseShow.PurchaseReturnsTopic" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="退货日期">
            <el-date-picker v-model="PurchaseShow.Pstart" type="date" value-format="YYYY-MM-DD" clearable />-
            <el-date-picker v-model="PurchaseShow.Pend" type="date" value-format="YYYY-MM-DD" clearable />
        </el-form-item>
        <el-form-item label="发货状态">
            <el-select v-model="PurchaseShow.PRShipmentState" style="width: 200px;" placeholder="全部">
                <el-option label="无需发货" :value="0" />
                <el-option label="待发货" :value="1" />
                <el-option label="发货完毕" :value="2" />
                <el-option label="部分发货" :value="3" />
            </el-select>
        </el-form-item>
        <el-form-item label="供应商名称">
            <el-input v-model="PurchaseShow.VName" style="width: 200px;" @dblclick="dialogVisible = true" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetPurchaseReturnList()">
                查询
            </el-button>
        </el-form-item>
    </el-form>


    <!-- 显示列表 -->
    <div style="font-weight: bold; font-size: 25px; text-align: center;">采购退货列表</div>
    <el-table :data="PurchaseReturnlist" style="width: 100%" @selection-change="handleSelectionChange1">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="purchaseReturnsCode" label="采购退货编号" align="center" />
        <el-table-column prop="purchaseReturnsTopic" label="采购退货主题" align="center" />
        <el-table-column prop="vName" label="供应商名称" align="center">
            <template v-slot="scope">
                <a @click="vender(scope.row.vendorId)">{{ scope.row.vName }}</a>
            </template>
        </el-table-column>
        <el-table-column prop="prReturnType" label="退货类别" align="center" />
        <el-table-column prop="rpNum" label="退货数量" align="center" />
        <el-table-column prop="pRtotalAmount" label="退货金额" align="center" />
        <el-table-column prop="prShipmentState" label="发货状态" align="center">
            <template v-slot="scope">
                {{ scope.row.prShipmentState == 0 ? '无需发货' : scope.row.prShipmentState == 1 ? '待发货' :
                    scope.row.prShipmentState == 2 ? '发货完毕' : '部分发货' }}
            </template>
        </el-table-column>
        <el-table-column prop="pReturnsPersonnel" label="退货人员" align="center" />
        <el-table-column prop="prReturnDate" label="退货日期" align="center">
            <template v-slot="scope">
                {{ scope.row.prReturnDate.substring(0, 10) }}
            </template>
        </el-table-column>
    </el-table>


    <!-- 供应商名称弹框 -->
    <el-dialog v-model="dialogVisible" title="供应商名称" width="1000" style="height: 600px;">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="vNumber" label="供应商编号" align="center" />
                        <el-table-column prop="vName" label="供应商名称" align="center" />
                        <el-table-column prop="vendorTypeName" label="供应商分类" align="center" />
                        <el-table-column prop="sName" label="供应商省" align="center" />
                        <el-table-column prop="cName" label="供应商市" align="center" />
                        <el-table-column prop="vContact" label="联系人" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>


    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="Page.lcount">
                    <span> , 每页 {{ Page.Psize }} 条，当前 {{ Page.Pindex }} / {{ Page.pcount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="Page.lcount">
                    <el-button :disabled="Page.Pindex == 1" @click="Page.Pindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="Page.lcount">
                    <el-button :disabled="Page.Pindex == Page.pcount" @click="Page.Pindex = Page.pcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>


</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const dialogVisible = ref(false)

//查询条件
const PurchaseShow = reactive({
    purchaseReturnsId: "",
    PurchaseReturnsCode: "",
    PurchaseReturnsTopic: "",
    Pstart: "",
    Pend: "",
    PROutboundProgress: "",
    PRShipmentState: "",
    VName: ""
})

//分页
const Page = reactive({
    Pindex: 1,
    Psize: 10,
    lcount: 0,
    pcount: 0
})


//#region  供应商名称弹框

//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const formInline = reactive({
    vNumber: '',
    vName: '',
    date: '',
    provinceId: '',
    cityId: '',
    vIndustry: '',
    bPhone: '',
    vPhone: '',
    vContact: '',
    PageIndex: 1,
    PageSize: 10,
    fid: ''
})


//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    formInline.fid = data.value
    table();
}


//供应商显示
var tableData = ref([]);
const table = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelectShow', {
        params: {
            FId: formInline.fid,
            Node: formInline.vNumber,
            Name: formInline.vName,
            Sid: formInline.provinceId,
            Cid: formInline.cityId,
            Hid: formInline.vIndustry,
            BPhone: formInline.bPhone,
            SPhone: formInline.vPhone,
            ZProper: formInline.vContact,
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize
        }
    }).then(res => {

        if (res.data.code == 200) {
            tableData.value = res.data.data.list
        }
        console.log(tableData.value)
    })
}

//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    PurchaseShow.VName = check.value[0].vName
    console.log(check.value[0].vName)
}

//#endregion


//显示列表
const PurchaseReturnlist = ref([])
const GetPurchaseReturnList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProcurementReturnList', {
        params: {
            Pindex: Page.Pindex || 0,
            Psize: Page.Psize || 0,
            PurchaseReturnsCode: PurchaseShow.PurchaseReturnsCode || '',
            PurchaseReturnsTopic: PurchaseShow.PurchaseReturnsTopic || '',
            Pstart: PurchaseShow.Pstart || '',
            Pend: PurchaseShow.Pend || '',
            PROutboundProgress: PurchaseShow.PROutboundProgress,
            PRShipmentState: PurchaseShow.PRShipmentState,
            VName: PurchaseShow.VName || '',
        }
    })
        .then(res => {
            console.log(res.data.data)
            PurchaseReturnlist.value = res.data.data.list;
            Page.lcount = res.data.data.lcount;
            Page.pcount = res.data.data.pcount;
        })
}

//多选框
const check1 = ref([])
const handleSelectionChange1 = (val: User[]) => {
    check1.value = val
    console.log(check1.value)
}

//跳新增
const add = () => {
    router.push('/AddPurchaseReturns');
}


//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check1.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '采购退货编号', '采购退货主题', '供应商名称', '退货类别', '退货数量', '退货金额', '发货状态', '退货人员', '退货日期']
            ]
            check1.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.purchaseReturnsCode,
                    item.purchaseReturnsTopic,
                    item.vName,
                    item.prReturnType,
                    item.rpNum,
                    item.rpPrice,
                    item.prShipmentState,
                    item.pReturnsPersonnel,
                    item.prReturnDate,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '采购退货') // 工作簿名称
            let name = '采购退货' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

//跳修改
const upd = () => {
    let PurchaseReturnsCode = check1.value.map(ele => ele.purchaseReturnsCode);
    let purchaseReturnsIds = check1.value.map(ele => ele.purchaseReturnsIds);
    console.log(purchaseReturnsIds)
    router.push('/UpdPurchaseReturns?PurchaseReturnsCode=' + PurchaseReturnsCode + '&purchaseReturnsIds=' + purchaseReturnsIds);
}


//跳转供应商名称
const vender = (vendorId: Number) => {
    router.push('/ListReturnsVendor?vendorId=' + vendorId);
}






onMounted(() => {
    getVendorType();
    table();
    GetPurchaseReturnList();
})



const defaultProps = {
    children: 'children',
    label: 'label',
}




</script>

<style></style>